import { defineComponent, reactive } from "vue";
import styles from "./caseEvaluationList.module.less";
import { imgPath } from "@/common/utils";
export default defineComponent({
  name:'userCenterCaseEvaluationList',
  setup() {
    const navs = reactive({
      list: [
        {
          text: '待评价',
        },
        {
          text: '已评价',
        },
      ],
      navsActived: 0,
    })
    const navClick = (index: number) => {
      navs.navsActived = index
    }
    const Navs = () => (
      <div class={styles.navs}>
        {
          navs.list.map((item: any, index: number) => (
            <div class={styles['navs-item']} onClick={() => { navClick(index) }}>
              <span class={[index === navs.navsActived && styles['nav-item-actived'],
              index !== navs.navsActived && styles['nav-item-noActived']]}
              >{item.text}</span>
            </div>
          ))
        }
      </div>
    )
    const state = reactive({
      list: [],
    })
    return () => (
      <div class={styles.caseEvaluationList}>
        <div class={styles['header-box']}>案件服务评价</div>
        <Navs />
        <div class={styles['list-thead']}>
          <div class={[styles['thead-col'], styles.info]}>基本信息</div>
          <div class={styles['thead-col']}>操作</div>
        </div>
        {
          state.list.length === 0 ? <div class={styles['no-message']}>
            <img src={imgPath('/home/no-message.jpg')} />
          </div> : <div class={styles['evaluationList-list']}></div>
        }
      </div>
    )
  }
})